<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>跟进提醒</title>
	<link rel="stylesheet" href="/css/common2.css">
	<link rel="stylesheet" href="/css/popup.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		/* .search_img {
			position: absolute;
			right: 3%;
		} */
		.filter-container {
			display: inline-block;
			flex-wrap: wrap;
			/* 允许换行 */
			gap: 10px;
			/* 输入框之间的间距 */
			max-width: 800px;
			/* 设置最大宽度，可以根据需要调整 */
		}

		.import_model {
			margin-top: -35px;
			margin-left: 130px;
		}

		.table {
			width: 100%;
			margin-left: 0;
		}

		.five {
			max-height: 55px !important;
			min-width: 130px !important;
			padding: 0;
		}

		.three {
			min-width: 100px;
			width: 9%;
		}

		.phone {
			color: blue;
		}

		.long-background-img {
			width: 120px;
			height: 35px;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}

		.nickname {
			position: absolute;
			left: 40px;
			bottom: calc((100% - 35px) / 2);
			width: 80px;
			text-align: left;
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.untying {
			position: absolute;
			right: 0;
			bottom: 0;
			display: inline-block;
			font-size: 12px;
			cursor: pointer;
			color: #9F9F9F;
		}

		.img-box {
			width: 35px;
			height: 35px;
			display: inline-block;
			padding: 0;
		}

		.phone {
			display: inline-block;
		}

		.header {
			width: 35px;
			height: 35px;
			position: absolute;
			left: 3px;
			bottom: calc((100% - 35px) / 2);
			display: inline-block;
			border-radius: 50%;
		}

		.choose-class {
			width: 94%;
			height: 35px;
			margin-left: 3%;
			margin-top: 35px;
		}

		.popup {
			width: 330px;
			height: 300px;
			/* margin: calc((100% - 300px) / 6) calc((100% - 300px) / 2); */
		}

		.popup-title {
			padding-left: 100px;
		}

		.relatives-info {
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			vertical-align: text-top;
			text-align: left;
		}

		.relatives-name {
			text-indent: 1em;
			width: calc(100% - 13em);
		}

		.relatives-relation {
			width: 5em;
		}

		.info2 {
			margin-top: 0.5em;
			vertical-align: text-top;
		}

		.relatives_info {
			width: 3.5em;
			display: inline-block;
			vertical-align: text-top;
		}

		.relatives_info img {
			height: 3.5em;
			width: 100%;
			border-radius: 50%;
			margin: 0 0.25em;
		}

		.uihf {
			display: flex;


		}

		.search {
			position: relative;
			right: 0px;
			margin: 5px 10px 0 0;
		}
        .message-summary-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #fd4b4b;
  color: white;
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  cursor: pointer;
  z-index: 1000;
}

.close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  background-color: transparent;
  color: white;
  border: none;
  font-size: 14px;
  cursor: pointer;
}
.close-btn:hover {
  text-decoration: underline;
}


button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    background: #69bbf4;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;">

		<div class="filter-container">
			<div class="refresh" onclick="location.reload()">刷新</div>
			<div class="uihf">
				<input placeholder="请输入学生姓名" class="search" v-model="search.name" @keyup.enter="getData0"
					style=" width: 120px; height: 33px;">
				<input placeholder="请输入家长姓名" class="search" v-model="search.parentNames" @keyup.enter="getData0"
					style=" width: 120px; height: 33px;">
				<input placeholder="请输入手机号" class="search" v-model="search.bindCode" @keyup.enter="getData0"
					style="width: 120px; height: 33px;">
				<input placeholder="请输入微信号" class="search" v-model="search.wechatId" @keyup.enter="getData0"
					style=" width: 120px; height: 33px;">
                    <input placeholder="请输入就读学校" class="search" v-model="search.schoolName1" @keyup.enter="getData0"
					style=" width: 120px; height: 33px;">
				<select class="search" v-model="search.schoolId">
					<option :value="undefined">请选择关联校区</option>
					<option v-for="school in schools" :key="school.id" :value="school.id" v-text="school.name">
					</option>
				</select>

				<select class="search" v-model="search.courseId">
					<option :value="undefined">请选择咨询课程</option>
					<option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
					</option>
				</select>

				
				<img src="../image/search.png" height="35" width="35" class="search_img" @click="getData0" />
			</div>
		</div>
		<form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
			<input type="file" name="file" id="file" @change="importExcel" ref="file"
				accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
		</form>
		<div class="table " style="margin-left: 2%;width: 96%; overflow: auto;">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th class="one">序号</th>
						<th class="one">学员姓名</th>
						<th class="one">咨询课程</th>
						<th class="one">关联校区</th>
						<th>就读学校</th>
						<th class="one">家长姓名</th>
						<th class="one">联系电话</th>
						<th class="one">微信号</th>
						<th class="one">跟进人</th>
						<th class="one">跟进时间</th>
						<th class="one">重要跟进信息</th>
						<th class="three">操作</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(student,index) in list" :key="student.id">
						<td>
							<input type="checkbox" class="check-box" v-model="student.checked">
						</td>
						<td class="one"><span v-text="index+1"></span></td>
						<td class="one" v-text="student.name"></td>
						<td class="one" v-text="student.courseNames"></td>
						<td class="one" v-text="student.fschoolName"></td>
						<td class="one" v-text="student.schoolName"></td>
						<td class="one" v-text="student.familyNames"></td>
						<td class="one" v-text="student.bindCode"></td>
						<td class="one" v-text="student.wechatId"></td>
						<td class="one" v-text="student.peopleName"></td>
						<td class="one" v-text="student.time"></td>
                        <td class="one" v-text="student.content"></td>

						<td class="three">
                            <button v-if="student.type == 0" @click="showAddFollowUpModal(student.id)">跟进</button>
                            <span v-else>已跟进</span> <!-- 当 student.type != 0 时显示 "已跟进" -->
                        </td>

					</tr>

				</tbody>
			</table>

		</div>
		<br>
        
        <div 
        v-if="showPopup" 
        class="message-summary-popup">
        <span>您有{{ unprocessedCount }}条未处理消息</span>
        <button class="close-btn" @click="closeMessagePopup">关闭</button>
    </div>

		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
			<li>
				<a v-text="pages"></a>
			</li>
		</ul>
		<div style="float: right;">
			总共{{total}}条记录
			<select class="ui-select init" style="height:32px" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>



	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>


	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>


	<script>
       var staffUserId= localStorage.getItem('staffUserId')
    // var staffUserId= "694969121713902"
		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue(merge({
			data: {
				schools: [],
               
				courses: [],
				
				urls: {
					
				},
				toPeopleId: null,
				unprocessedCount :'',
				shownStudent: null,
                showPopup: false,
				
			},
			created: function () {
				var id = top_params().id;
				if (!id) return;
				this.agentId = id
                if(staffUserId!='null'){
                    this.urls.list = '/pc/importantFollowUp/list?people=' + staffUserId;
                    axios.get('/pc/importantFollowUp/tj/' + staffUserId)
      .then((res) => {
        this.unprocessedCount = res.data;
        if (this.unprocessedCount > 0) {
          this.showPopupMessage();
        }
      })
      .catch((error) => console.error(error));

                }
				this.getData();

				axios.get('/pc/school/all/' + id).then(function (res) {
					this.schools = res.data;
				}.bind(this));
				abled('schedule', this);

				axios.get('/pc/course/all/' + id).then(function (res) {
					this.courses = res.data
				}.bind(this));
               
			},

			methods: {
                showAddFollowUpModal(id){
                    var payload = {
						id: id,
						type:1
					};
					axios.put("/pc/importantFollowUp", payload)
						.then(({ data }) => {
							this.getData();
							alert('已跟进');
							
							
						})
						.catch((error) => {

							alert(error.msg);
						});
                },
                showPopupMessage() {
    this.showPopup = true;
  },
  
  // 用户点击关闭弹窗时，关闭弹窗
  closeMessagePopup() {
    this.showPopup = false;
  },
				
			}
		}));
	</script>

</body>

</html>